<template>
  <div class="content-box-pile">
    <div class="block">
      <span class="label">{{ "累计接口调用次数" }}</span>
      <span class="value">
        {{ interfaceCallTimes }}
      </span>
    </div>
    <div class="block">
      <span class="label">{{ "累计库表推送次数" }}</span>
      <span class="value">
        {{ cumulateTablePushTimes }}
      </span>
    </div>
  </div>
</template>

<script>
import API from "@/api/develop";
export default {
  name: "d2-box",
    data() {
      return {
          interfaceCallTimes: 0,
          cumulateTablePushTimes: 0
      }
    },
    methods: {
        getBoxData() {
            let handleV1 = (res) => (
                this.interfaceCallTimes = JSON.parse(res.data.resultContent).serviceApplication.interfaceInvokeCount,
                this.cumulateTablePushTimes = JSON.parse(res.data.resultContent).serviceApplication.databasePushCount
            );

            API.getdycs().then(handleV1);

        },
        getTask() {
            return () => {
                this.getBoxData();
            };
        },
    },
    mounted() {
        this.getTask()(); // 先执行 一次任务
        this.timer = setInterval(this.getTask(), 30000); // 设置周期触发任务
    },
    beforeDestroy() {
        clearInterval(this.timer);
        this.timer = null;
    }
};
</script>

<style lang="less" scoped>
.content-box-pile {
  width: 100%;
  height: 120px;
  display: grid;
  grid-gap: 5px;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(1, 1fr);
  .block {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .label {
      font-size: 16px;
      font-weight: 550;
    }
    .value {
      font-size: 20px;
      margin-top: 10px;
      font-weight: 600;
    }
    padding: 10px;
    &:nth-child(1) {
      background: url(../../../assets/img/develop/bg1-dot.jpg) no-repeat;
      background-size: 100% 100%;
      .value {
        color: #6674ec;
      }
    }
    &:nth-child(2) {
      background: url(../../../assets/img/develop/bg2-dot.jpg) no-repeat;
      background-size: 100% 100%;
      .value {
        color: #fc9121;
      }
    }
  }
}
</style>
